<template>
	<view class="container">
		<textarea placeholder="在这里填入您的备注信息" placeholder-class="note" :value="vlaue"></textarea>
		<div class="prompt">
			<span class="promptItem" @click="changeValue(prompt1)">{{prompt1}}</span>
			<span class="promptItem" @click="changeValue(prompt2)">{{prompt2}}</span>
		</div>
		<div class="submit" @click="toOrder">完成</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vlaue:"",
				prompt1:"请不要敲门，到了后打电话",
				prompt2:"如果没人就放门口"
			}
		},
		methods: {
			changeValue(newValue){
				this.vlaue=newValue
			},
			toOrder(){
				uni.navigateTo({
					url:'../order/order'
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 50rpx 20rpx;
	position: relative;
	textarea{
		width: 100%;
		height: 200rpx;
		font-size: 32rpx;
		.note{
			font-size: 30rpx;
		}
	}
	.prompt{
		.promptItem{
			padding: 20rpx;
			font-size: 28rpx;
			color: #C0C0C0;
			border-radius: 40rpx;
			border: 1px solid #C0C4CC;
			margin-right: 20rpx;
		}
	}
	.submit{
		font-size: 32rpx;
		color: #19BE6B;
		font-weight: bold;
		position: absolute;
		right: 20rpx;
		top: 0;
	}
}
</style>
